<script setup>

import {onMounted, ref} from "vue";
import {doGet} from "@/util/request.js";
import {useRoute, useRouter} from "vue-router";
import {showMessage} from "@/util/message.js";

//对话框打开
const dialogVisible = ref(true)
//用户详情对象
const userDetail = ref({})
// 获取路由参数
const route = useRoute()
//获取路由对象
const router = useRouter()
//查询用户详情
const loadUserDetail = () => {
  let userId = route.params.userId;
  //发送请求，获取用户详情
  doGet('/api/user/detail/' + userId, {}).then(resp => {
    if (resp.data.code === 200) {
      userDetail.value = resp.data.data
    } else {
      showMessage('查询用户详情失败', resp.data.msg, 'error')
    }
  })

}
onMounted(() => {
  loadUserDetail()
})
</script>

<template>

  <el-dialog
      v-model="dialogVisible"
      width="700"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :align-center="true"
      :center="true"
      :show-close="false"
      title="用户详情">

  <el-form :model="userDetail">
    <el-form-item label="编号: ">
      {{ userDetail.id }}
    </el-form-item>
    <el-form-item label="账号: ">
      {{ userDetail.loginAct }}
    </el-form-item>

    <el-form-item label="姓名: ">
      {{ userDetail.name }}
    </el-form-item>

    <el-form-item label="电话: ">
      {{ userDetail.phone }}
    </el-form-item>

    <el-form-item label="邮箱: ">
      {{ userDetail.email }}
    </el-form-item>

    <el-form-item label="帐号是否过期：">
      {{ userDetail.accountNoExpired === 1 ? '未过期' : '已过期' }}
    </el-form-item>
    <el-form-item label="密码是否过期：">
      {{ userDetail.credentialsNoExpired === 1 ? '未过期' : '已过期' }}
    </el-form-item>
    <el-form-item label="帐号是否锁定：">
      {{ userDetail.accountNoLocked === 1 ? '未锁定' : '已锁定' }}
    </el-form-item>
    <el-form-item label="帐号是否可用：">
      {{ userDetail.accountEnabled === 1 ? '可用 ' : '不可用' }}
    </el-form-item>

    <el-form-item label="创建人: ">
      {{ userDetail.createByName }}
    </el-form-item>

    <el-form-item label="创建时间: ">
      {{ userDetail.createTime }}
    </el-form-item>

    <el-form-item label="编辑人: ">
      {{ userDetail.editByName }}
    </el-form-item>

    <el-form-item label="编辑时间: ">
      {{ userDetail.editTime }}
    </el-form-item>

    <el-form-item label="最近登录时间: ">
      {{ userDetail.lastLoginTime }}
    </el-form-item>

  </el-form>
  <div style="margin-left: 550px">
    <el-button type="primary" @click="router.back()">返回</el-button>
  </div>
  </el-dialog>
</template>

<style scoped>
.el-form {
  margin-top: 20px;
  margin-left: 80px;
}
.el-form-item{
  margin-left: 60px;
}

.el-col {
  margin-top: 20px;
  margin-left: 50px;
}
</style>